<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>废旧工作台</title>
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/common-m.css" />
    <link rel="stylesheet" href="../common/css/swiper.min.css" />
    <link rel="stylesheet" href="./css/index-vw.css" />
    <!-- <link rel="stylesheet" href="./css/index.css" /> -->
  </head>
  <body>
    <div class="page-container">
      <!-- header -->
      <header class="header flex between">
        <img src="./images/icon-back.png" class="icon-back" />
        <div class="search-box flex">
          <img src="./images/icon-search.png" class="icon-search" />
          <input
            type="text"
            placeholder="请输入关键词搜索"
            class="input-search"
          />
        </div>
        <img
          src="./images/icon-filter.png"
          class="icon-filter"
          onclick="openPopup('popupFilter')"
        />
      </header>
      <!-- banner -->
      <section class="banner">
        <img src="./images/banner.png" class="banner-img" />
      </section>
      <!-- list -->
      <section class="list">
        <div class="item">
          <div class="item-content">
            <div class="text-name ellipsis">
              河北中废通网络技术有限公司河北中废通网络技术有限公司
            </div>
            <div class="text-vip flex">
              <img src="./images/vip-zx.png" class="img-vip" />
              <p>第<span class="text-green">5</span>年</p>
            </div>
            <div class="icon-list flex">
              <div class="icon-item flex">
                <img src="./images/icon-shiming.png" class="icon" />
                <span class="text">实名认证</span>
              </div>
              <div class="icon-item flex">
                <img src="./images/icon-shidi.png" class="icon" />
                <span class="text">实地认证</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="text-desc ellipsis">
              所属行业:
              智能回收、科技环保、智能回收、科技环保、智能回收、科技环保
            </div>
            <div class="text-desc ellipsis">公司主营: 废金属、废km电、废</div>
            <!-- 有在线聊天权限 -->
            <!-- <a href="https://www.feijiu.net" class="button primary">
              在线询价
            </a> -->
            <!-- 没有在线聊天权限弹留言弹窗,传入uid -->
            <div class="button primary" onclick="openMessagePopup('11111')">
              在线询价
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item-content">
            <div class="text-name ellipsis">
              河北中废通网络技术有限公司河北中废通网络技术有限公司
            </div>
            <div class="text-vip flex">
              <img src="./images/vip-zx.png" class="img-vip" />
              <p>第<span class="text-green">5</span>年</p>
            </div>
            <div class="icon-list flex">
              <div class="icon-item flex">
                <img src="./images/icon-shiming.png" class="icon" />
                <span class="text">实名认证</span>
              </div>
              <div class="icon-item flex">
                <img src="./images/icon-shidi.png" class="icon" />
                <span class="text">实地认证</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="text-desc ellipsis">
              所属行业:
              智能回收、科技环保、智能回收、科技环保、智能回收、科技环保
            </div>
            <div class="text-desc ellipsis">公司主营: 废金属、废km电、废</div>
            <a href="https://www.feijiu.net" class="button primary">
              在线询价
            </a>
          </div>
        </div>
        <div class="item">
          <div class="item-content">
            <div class="text-name ellipsis">
              河北中废通网络技术有限公司河北中废通网络技术有限公司
            </div>
            <div class="text-vip flex">
              <img src="./images/vip-zx.png" class="img-vip" />
              <p>第<span class="text-green">5</span>年</p>
            </div>
            <div class="icon-list flex">
              <div class="icon-item flex">
                <img src="./images/icon-shiming.png" class="icon" />
                <span class="text">实名认证</span>
              </div>
              <div class="icon-item flex">
                <img src="./images/icon-shidi.png" class="icon" />
                <span class="text">实地认证</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="text-desc ellipsis">
              所属行业:
              智能回收、科技环保、智能回收、科技环保、智能回收、科技环保
            </div>
            <div class="text-desc ellipsis">公司主营: 废金属、废km电、废</div>
            <a href="https://www.feijiu.net" class="button primary">
              在线询价
            </a>
          </div>
        </div>
        <div class="item">
          <div class="item-content">
            <div class="text-name ellipsis">
              河北中废通网络技术有限公司河北中废通网络技术有限公司
            </div>
            <div class="text-vip flex">
              <img src="./images/vip-zx.png" class="img-vip" />
              <p>第<span class="text-green">5</span>年</p>
            </div>
            <div class="icon-list flex">
              <div class="icon-item flex">
                <img src="./images/icon-shiming.png" class="icon" />
                <span class="text">实名认证</span>
              </div>
              <div class="icon-item flex">
                <img src="./images/icon-shidi.png" class="icon" />
                <span class="text">实地认证</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="text-desc ellipsis">
              所属行业:
              智能回收、科技环保、智能回收、科技环保、智能回收、科技环保
            </div>
            <div class="text-desc ellipsis">公司主营: 废金属、废km电、废</div>
            <a href="https://www.feijiu.net" class="button primary">
              在线询价
            </a>
          </div>
        </div>
        <div class="item">
          <div class="item-content">
            <div class="text-name ellipsis">
              河北中废通网络技术有限公司河北中废通网络技术有限公司
            </div>
            <div class="text-vip flex">
              <img src="./images/vip-zx.png" class="img-vip" />
              <p>第<span class="text-green">5</span>年</p>
            </div>
            <div class="icon-list flex">
              <div class="icon-item flex">
                <img src="./images/icon-shiming.png" class="icon" />
                <span class="text">实名认证</span>
              </div>
              <div class="icon-item flex">
                <img src="./images/icon-shidi.png" class="icon" />
                <span class="text">实地认证</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="text-desc ellipsis">
              所属行业:
              智能回收、科技环保、智能回收、科技环保、智能回收、科技环保
            </div>
            <div class="text-desc ellipsis">公司主营: 废金属、废km电、废</div>
            <a href="https://www.feijiu.net" class="button primary">
              在线询价
            </a>
          </div>
        </div>
        <div class="item">
          <div class="item-content">
            <div class="text-name ellipsis">
              河北中废通网络技术有限公司河北中废通网络技术有限公司
            </div>
            <div class="text-vip flex">
              <img src="./images/vip-zx.png" class="img-vip" />
              <p>第<span class="text-green">5</span>年</p>
            </div>
            <div class="icon-list flex">
              <div class="icon-item flex">
                <img src="./images/icon-shiming.png" class="icon" />
                <span class="text">实名认证</span>
              </div>
              <div class="icon-item flex">
                <img src="./images/icon-shidi.png" class="icon" />
                <span class="text">实地认证</span>
              </div>
            </div>
            <div class="line"></div>
            <div class="text-desc ellipsis">
              所属行业:
              智能回收、科技环保、智能回收、科技环保、智能回收、科技环保
            </div>
            <div class="text-desc ellipsis">公司主营: 废金属、废km电、废</div>
            <a href="https://www.feijiu.net" class="button primary">
              在线询价
            </a>
          </div>
        </div>
      </section>
      <!-- 加载中的提示 -->
      <p id="textTip" class="text-tip"></p>
    </div>

    <!-- 筛选弹窗 -->
    <div id="popupFilter" class="popup-container" hidden>
      <div class="popup-mask">
        <div class="popup-body">
          <div class="popup-header flex between">
            <div onclick="reset()">重置</div>
            <h3>筛选</h3>
            <div class="text-green" onclick="submit()">完成</div>
          </div>
          <div class="popup-content">
            <div class="filter-title">物资分类</div>
            <div class="filter-list cate flex wrap">
              <div class="filter-item active"><p class="ellipsis">全部</p></div>
              <div class="filter-item"><p class="ellipsis">废金属</p></div>
              <div class="filter-item"><p class="ellipsis">二手设备</p></div>
              <div class="filter-item"><p class="ellipsis">库存物资</p></div>
              <div class="filter-item"><p class="ellipsis">旧纺织皮革</p></div>
              <div class="filter-item">
                <p class="ellipsis">废旧橡胶轮胎</p>
              </div>
              <div class="filter-item">
                <p class="ellipsis">
                  玻璃与木制品玻璃与木制品玻璃与木制品玻璃与木制品
                </p>
              </div>
            </div>
            <div class="filter-title">所在地区</div>
            <div class="filter-list area flex wrap">
              <div class="filter-item active"><p class="ellipsis">全国</p></div>
              <div class="filter-item"><p class="ellipsis">北京</p></div>
              <div class="filter-item"><p class="ellipsis">天津</p></div>
              <div class="filter-item"><p class="ellipsis">河北</p></div>
              <div class="filter-item"><p class="ellipsis">山西</p></div>
              <div class="filter-item"><p class="ellipsis">内蒙古</p></div>
              <div class="filter-item"><p class="ellipsis">辽宁</p></div>
              <div class="filter-item"><p class="ellipsis">吉林</p></div>
              <div class="filter-item"><p class="ellipsis">黑龙江</p></div>
              <div class="filter-item"><p class="ellipsis">上海</p></div>
              <div class="filter-item"><p class="ellipsis">江苏</p></div>
              <div class="filter-item"><p class="ellipsis">浙江</p></div>
              <div class="filter-item"><p class="ellipsis">安徽</p></div>
              <div class="filter-item"><p class="ellipsis">福建</p></div>
              <div class="filter-item"><p class="ellipsis">江西</p></div>
              <div class="filter-item"><p class="ellipsis">山东</p></div>
              <div class="filter-item"><p class="ellipsis">河南</p></div>
              <div class="filter-item"><p class="ellipsis">湖北</p></div>
              <div class="filter-item"><p class="ellipsis">湖南</p></div>
              <div class="filter-item"><p class="ellipsis">广东</p></div>
              <div class="filter-item"><p class="ellipsis">广西</p></div>
              <div class="filter-item"><p class="ellipsis">海南</p></div>
              <div class="filter-item"><p class="ellipsis">重庆</p></div>
              <div class="filter-item"><p class="ellipsis">四川</p></div>
              <div class="filter-item"><p class="ellipsis">贵州</p></div>
              <div class="filter-item"><p class="ellipsis">云南</p></div>
              <div class="filter-item"><p class="ellipsis">西藏</p></div>
              <div class="filter-item"><p class="ellipsis">陕西</p></div>
              <div class="filter-item"><p class="ellipsis">甘肃</p></div>
              <div class="filter-item"><p class="ellipsis">青海</p></div>
              <div class="filter-item"><p class="ellipsis">宁夏</p></div>
              <div class="filter-item"><p class="ellipsis">新疆</p></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 留言弹窗 -->
    <div id="popupMessage" class="popup-container bottom popupMessage" hidden>
      <div class="popup-mask">
        <div class="popup-body">
          <div class="popup-header flex">
            <h3 class="popup-title">留言询盘</h3>
            <div class="close" onclick="closePopup('popupMessage')">
              &times;
            </div>
          </div>
          <div class="popup-content">
            <form class="form message">
              <div class="form-item input">
                <label for="name">联系人</label>
                <input type="text" placeholder="请输入联系人姓名" name="name" />
              </div>
              <div class="form-item input">
                <label for="phone">联系电话</label>
                <input type="text" placeholder="请输入联系电话" name="phone" />
              </div>
              <div class="form-item textarea">
                <label for="desc">补充内容</label>
                <textarea
                  id="desc"
                  placeholder="填写想要了解的物资信息，如产品规格、价格、数量等"
                  name="desc"
                  maxlength="200"
                  oninput="updateTextCount()"
                ></textarea>
                <div class="text-count"><span id="descCount">0</span>/200</div>
              </div>
              <div class="form-item">
                <div class="button primary" onclick="onSubmitMessage()">
                  提交留言
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- toast -->
    <div id="toast" class="toast" hidden></div>

    <script src="../common/js/jquery-3.2.1.min.js"></script>
    <script src="../common/js/swiper.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
